<template>
  <div style="background-color: #ffffff;height: 100%" v-loading="loading">
    <el-container class="layout-container-demo" style="height: 100%">
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '2']">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <message/>
                </el-icon>
                按年份分类
              </template>
              <el-menu-item index="1-1">2000年以前</el-menu-item>
              <el-menu-item index="1-2">2001年-2010年</el-menu-item>
              <el-menu-item index="1-3">2010年-2020年</el-menu-item>
              <el-menu-item index="1-4">2020年以后</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <message/>
                </el-icon>
                按类别分类
              </template>
              <el-menu-item index="2-1">文学</el-menu-item>
              <el-menu-item index="2-2">计算机科学</el-menu-item>
              <el-menu-item index="2-3">机械工程</el-menu-item>
              <el-menu-item index="2-4">理论学</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container v-loading="loading" class="contain">
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <el-input type="text" placeholder="继续搜索" suffix-icon="Position"
                      @keyup.enter="enterSearch"
                      v-model="searchKeyTmp"/>
          </div>
        </el-header>

        <el-main class="result">
          <div style="height: 100%;width: 100%">
            <el-scrollbar view-class="result-scrollbar" max-height="796px" height="796px">
              <el-empty v-show="bookList === null || bookList.length === 0" description="无检索结果"></el-empty>
              <div class="result-item" v-for="(book, index) in bookList" :key="book">
                <div class="result-item-head">
                  <el-icon color="#6ab1f3" size="86">
                    <Memo/>
                  </el-icon>
                </div>
                <div class="result-item-info">
                  <div class="result-item-info-item" style="height: 40px;line-height: 40px;text-align: left;">
                    <h4 style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap;" v-html="brightenTotalKeyword(book['name'])" ></h4>
                  </div>
                  <div class="result-item-info-item" style="height: 24px;line-height: 24px;text-align: left">
                    {{ book['author'] }}
                  </div>
                  <div class="result-item-info-item" style="height: 24px;line-height: 24px;text-align: left">
                    <i style="font-weight: lighter;font-size: 12px;"> {{ book['isbn'] }}</i>
                  </div>
                </div>
                <div class="result-item-more">
                  <div class="result-item-mort-item">
                    <el-tag type="primary">馆藏: {{ book['total'] }}</el-tag>
                    <div style="height: 100%;width: 10px;"></div>
                    <el-tag type="danger">借出: {{ book['borrow'] }}</el-tag>
                  </div>
                  <div class="result-item-mort-item">
                    <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">最大可借阅天数: {{ book['max'] }}</el-tag>
                    <div style="height: 100%;width: 10px;"></div>
                    <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">评分: {{ book['rating'] }}</el-tag>
                    <div style="height: 100%;width: 10px;"></div>
                    <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">类型: {{ book['type'] }}</el-tag>
                  </div>
                </div>
                <div class="result-item-operate">
                  <div class="result-item-operate-item">
                    <el-button type="primary" plain="plain" @click="borrowBook(index)">
                      借阅
                    </el-button>
                  </div>

                  <div class="result-item-operate-item">
                    <el-button type="success" plain="plain" @click="showInfo(index)">详情</el-button>
                  </div>

                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-main>
        <el-footer style="padding: 10px 22% 0 22%">
          <el-pagination
              v-model:current-page="pagePos"
              v-model:page-size="pageSize"
              large="large"
              background
              layout="prev, pager, next, jumper"
              :total="pageMax"
              hide-on-single-page
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-footer>
      </el-container>
    </el-container>
    <el-drawer v-if="showData !== null && showData.length !== 0" v-model="drawer" direction="rtl">
      <template #header>
        <h4>{{ showData[showIndex]['name'] }}</h4>
      </template>
      <template #default>
        <el-descriptions
            class="margin-top"
            :column="1"
            size="large"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon >
                  <user />
                </el-icon>
                书名
              </div>
            </template>
            {{ showData[showIndex]['name'] }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon >
                  <user />
                </el-icon>
                作者
              </div>
            </template>
            {{ showData[showIndex]['author'] }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <iphone />
                </el-icon>
                ISBN
              </div>
            </template>
            {{ showData[showIndex]['isbn'] }}
          </el-descriptions-item>
<!--          color="#f0f9eb" style="color: #7dc28a;border: #b3e19d"-->
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <iphone />
                </el-icon>
                类型
              </div>
            </template>
            {{ showData[showIndex]['type'] }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <location />
                </el-icon>
                最大借阅时间
              </div>
            </template>
            <el-tag size="large" type="primary">
              {{ showData[showIndex]['max'] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                馆藏
              </div>
            </template>
            <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">{{ showData[showIndex]['total'] }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <office-building />
                </el-icon>
                借出
              </div>
            </template>
            <el-tag type="danger">{{ showData[showIndex]['borrow'] }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                页数
              </div>
            </template>
            <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">{{ showData[showIndex]['page'] }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                出版社
              </div>
            </template>
            <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">{{ showData[showIndex]['press'] }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                出版时间
              </div>
            </template>
            <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">{{ showData[showIndex]['time'] }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                评分
              </div>
            </template>
            <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">{{ showData[showIndex]['rating'] }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                简介
              </div>
            </template>
            <span v-show="showData[showIndex]['summary'] !== null">{{ showData[showIndex]['summary'] }}</span>
            <el-tag v-show="showData[showIndex]['summary'] === null" type="danger">暂无</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <tickets />
                </el-icon>
                该书豆瓣点评地址
              </div>
            </template>
            <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">{{ showData[showIndex]['url'] }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </el-drawer>
  </div>

</template>

<script setup>
import {ElScrollbar} from 'element-plus'
</script>

<script>
import {ElMessage} from "element-plus";
import {post, TIME_SPLIT} from "@/http";
import router from "@/router";

export default {
  name: "ReaderSearch",
  data() {
    return {
      id: "",
      searchKeyTmp: "",
      bookList: [],
      showData: [],
      searchKey: "",
      loading: false,
      pagePos: 1,
      pageSize: 10,
      pageMax: 0,
      drawer: false,
      showIndex: 0,

    }
  },
  methods: {
    get_info(){
      const source = window.sessionStorage.getItem("Id")
      if(source === null){
        ElMessage.error("请先登录")
        router.push('/Login')
        return
      }else{
        const begin = source.split(';')[1]
        const now = new Date().getDate()
        if(now - Number(begin) > TIME_SPLIT){
          ElMessage.error("登录信息失效,请重新登录")
          router.push("/Login")
          return
        }else{
          this.id = source.split(';')[0]
          let params = new URLSearchParams()
          params.append("id", this.id)
          this.loading = true
          post("/api/reader/someReader", params).then(res=>{
            if(res.data.code !== 200){
              ElMessage.error("服务器请求数据错误,请尝试重新登录")
              router.push("/Login")
            }else{
              if(res.data.data === null){
                ElMessage.error("服务器上找不到该用户,请尝试重新登录或注册")
                router.push("/Login")
              }
            }
            this.loading = false
          })
        }
      }
      const searchKey = window.sessionStorage.getItem("SearchKey")
      if(searchKey !== null && searchKey.length !== 0){
        this.searchKey = searchKey
        this.searchKeyTmp = this.searchKey
        this.search()
      }
    },
    search() {
      if (this.searchKey === null || this.searchKey.length === 0) {
        ElMessage.error("请输入关键词再进行搜索")
      } else {
        this.loading = true
        let params = new URLSearchParams()
        params.append("current", this.pagePos)
        params.append("size", this.pageSize)
        params.append("name", this.searchKey)
        post("/api/reader/findBook", params).then(res => {
          this.loading = false
          if (res.data.code !== 200) {
            ElMessage.error("服务端请求错误")
          } else {
            this.bookList = res.data.data
            this.showData = this.bookList
            this.pageMax = Number(res.data.message)
          }
        })
        this.loading = false
      }
    },
    handleCurrentChange(current) {
      this.pagePos = current
      this.search()
    },
    handleSizeChange(size){
      console.log(size)
    },
    searchFunc() {
      this.showData = []
      if (this.searchKey.length === 0) {
        this.showData = this.readHistory
      } else {
        this.readHistory.forEach(item => {
          if (item['isbn'].indexOf(this.searchKey) !== -1)
            this.showData.push(item)
        })
      }
    },
    brightenTotalKeyword(val) {
      const Reg = new RegExp(this.searchKey, 'gi');
      let res = '';
      if (val) {
        res = val.replace(Reg, `<span style="color: #cc0000;">${this.searchKey}</span>`);
        return res;
      }
    },
    showInfo(index){
      this.showIndex = index
      this.drawer = true
    },
    borrowBook(index){
      post("/api/reader/borrowBook", {
        "isbn": this.showData[index]['isbn'],
        "id": this.id.toString()
      }).then(res=>{
        if(res.data.code !== 200){
          ElMessage.error(res.data.message)
        }else{
          ElMessage.success(res.data.message)
          this.showData[index]['borrow'] += 1
        }
      })
    },
    enterSearch(){
      this.searchKey = this.searchKeyTmp;
      this.pagePos = 1;
      this.search()
    }
  },
  created() {
    this.get_info()
  }
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-footer {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: #ffffff;
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0 !important;
  --el-main-padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.toolbar el-input {
  width: 360px;
}

.el-loading-mask {
  z-index: 99999;
}

.result-item {
  display: flex;
  padding: 5px;
  height: 100px;
}

.result-item-head {
  height: 100%;
  width: 90px;
  padding: 2px;
}

.result-item-operate {
  height: 100%;
  width: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 3px;
}

.result-item-operate-item {
  width: 100%;
  height: 40px;
  padding-left: 5px;
}

.result-item-more {
  padding-top: 10px;
  height: 100%;
  width: 400px;
  display: flex;
  flex-direction: column;
}

.result-item-mort-item {
  width: 100%;
  height: 40px;
  display: flex;
}

.result-item-info {
  height: 100%;
  width: calc(100% - 570px - 10px);
  display: flex;
  flex-direction: column;
}

.result-item-info-item {
  width: 100%;
}

.result-scrollbar {
  min-height: 100%;
  max-height: 100%;
}

.result {
  min-height: calc(100% - 120px);
  max-height: calc(100% - 120px);
  padding: 0;
}
.contain{
  padding: 0;
}

</style>